<template>
    <div>
        <Header v-if="showHeader" title="我发起的"></Header>
        <div ref="topWarp" class="search top-warp">
            <van-search v-model="value" placeholder="请输入关键字搜索" show-action shape="round" @search="onSearch" >
                <div slot="action" @click="onSearch">搜索</div>
            </van-search>
        </div>
        <!--滑动区域 ref='mescroll'不能删, 目的是路由切换时可通过ref调用mescroll-vue组件的beforeRouteEnter方法-->
        <mescroll-vue ref="approveListScroll" :up="mescrollUp" @init="mescrollInit">
            <div id="sponsored_wrapper" :style="{minHeight:clientH}">
                <ApproveList :list="list" :pageName="pageName"></ApproveList>
            </div>
        </mescroll-vue>
        <Loading v-show="showLoading"></Loading>
    </div>
</template>
<script>
import MescrollVue from 'mescroll.js/mescroll.vue';
import ApproveList from "@/components/business/ApproveList.vue";
import { applies } from "@/request/api.js";
import Loading from "@/components/Loading.vue";
import Header from "@/components/Header.vue";
export default {
    name:'Sponsored',
    data(){
        return {
            showHeader:this.$store.state.showHeader,
            showLoading:false,
            clientH:0,
            value:'',
            list: [],
            staffer_id:'',
            pageName:'我发起的',
            mescroll: null,
            mescrollUp: {
                callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page, mescroll) { getListData(page); }
                page: {
                  num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
                  limit: 10 // 每页数据的数量
                },
                noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
                empty: {
                  // 列表第一页无任何数据时,显示的空提示布局; 需配置warpId才生效;
                  warpId: 'sponsored_wrapper', // 父布局的id;
                  tip: '没有更多了~', // 提示

                },
                htmlNodata: '<p class="upwarp-nodata">没有更多了~</p>', // 无数据的布局
            },
        }
    },
    components:{
        MescrollVue,
        ApproveList,
        Loading,
        Header
    },
    created () {
        // console.log(this.$route.meta.title)
        var h = document.body.clientHeight
        this.clientH = h - 44 + 'px';
        this.staffer_id = localStorage.getItem('staffer_id');
    },
    mounted(){
        if (this.showHeader) {
            this.$refs.topWarp.style.top = 44 + 'px'
            this.$refs.approveListScroll.$el.style.top = 88 + 'px'
        }
    },
    methods:{
        onSearch(){
            this.showLoading = true;
            applies({token:this.$store.state.token,page:1,page_num:this.limit,fd_sta_name:this.value}).then(res=>{
                // console.log(res)
                this.list = res.data.data;
                this.page = 1;
                this.showLoading = false;
            }).catch(error=>{
                console.log(error)
                this.showLoading = false;
            })
        },
        // mescroll组件初始化的回调,可获取到mescroll对象
        mescrollInit (mescroll) {
          this.mescroll = mescroll
        },
        // 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
        upCallback (page,mescroll) {
            // console.log('pages'+page.num)
            // 联网加载数据
            applies({
                token:this.$store.state.token,
                id:this.staffer_id,
                fd_sta_name:this.value,
                page:page.num,
                page_num:page.limit
            }).then(res=>{
                let list = res.data;
                // console.log(list)
                if (page.num==1) {
                    this.list = list.data;
                } else {
                    this.list = this.list.concat(list.data);
                }
                // 数据渲染成功后,隐藏下拉刷新的状态
                this.$nextTick(() => {
                    mescroll.endSuccess(list.data.length)
                })
            }).catch(error=>{
                console.log(error);
                mescroll.endErr()
            })
        },
    },
    
}
</script>
<style lang="less" scoped>
.search{
    width: 100%;
    height: 44px;
    overflow: hidden;
    .van-search{padding-top: 0;padding-bottom: 0;height: 44px;}
}
.search>div{height: 44px !important;}
.refresh_wrapper{
    width: 100%;
    min-height: 300px;
    background-color: #fff;
    // padding-top: 50px;
}
.van-search__action{font-size: 15px;color: #626466;}
/deep/ .van-field__left-icon .van-icon{font-size: 15px;font-weight: bolder;}
/deep/ .van-field__body{font-size: 14px;color: #999;}
.top-warp{
    z-index: 999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 44px;
    background-color: #fff;
    
}
/*以fixed的方式固定mescroll的高度*/
    .mescroll {
      width: 100%;
      position: fixed;
      top: 44px;
      bottom: 0;
      height: auto;
      background-color: #fff;
      .mescroll-upwarp{height: 0 !important;min-height: 0 !important;padding: 0 !important;}
    }
</style>